<template>
  <div id="boardIndex">
    <el-row :gutter="0"  justify="center">
      <el-col :sm="18" :lg="18" :xs="24">
        <div>
          <el-row justify="space-between">
            <el-col :xs="12"  :lg="12" :xl="8">
              <img class="elImg"   />
            </el-col>
            <el-col :xs="12"  :lg="12" :xl="8">
              <div style="margin: 3px 3px 3px 3px ">
                <el-form-item label="到期日:">
                  <el-date-picker value-format="YYYY-MM-DD" v-model="form.data.startDate"></el-date-picker>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="board">
          <DataTable :value="state.data"  class="p-datatable-sm" breakpoint="374px" :resizableColumns="false" @row-click="openDetail" >
            <Column v-for="col of state.columns " :field="col.key"  :key="col.key" :hidden="col.hide" headerStyle="color: #fff;width: 16%;background: #333;position: sticky;top: 0;padding: 16px 0; " :bodyStyle="'background: #333;position: sticky;top: 0;padding: 16px 0;text-align: center;color:'+col.color"  >
              <template #header="slotProps">
                <div @click="setShow()" style="place-content: center;">
                  {{col.title}}
                </div>
              </template>
            </Column>
          </DataTable>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup  from 'primevue/columngroup';     //optional for column grouping
import Row from 'primevue/row';
import PrimeVue from 'primevue/config';
import Button from 'primevue/button';


import 'primevue/resources/themes/saga-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';

import { getTAll } from "@/api/board/template";
import {getBoardDetailList} from "../../api/board/template";
import {onBeforeMount, onMounted} from "vue";
const {proxy} = getCurrentInstance()
const router = useRouter()
const form = reactive({
  data:{
    startDate:proxy.$moment(new Date()).format('YYYY-MM-DD')
  }
})
const state = reactive({
  columns: [
    {
      title: '板块',
      key: 'subject',
      align: 'center',
      hide : false,
      color: '#fff'
    },{
      title: '品种',
      key: 'subject',
      align: 'center',
      hide : false,
      color: '#fff'
    },
    {
      title: '标的',
      key: 'iName',
      align: 'center',
      hide : false,
      color: '#fff'
    },{
      title: '标的instrument',
      key: 'instrument',
      align: 'center',
      hide : true,
      color: '#fff'
    },
    {
      title: '标的价格',
      key: 'spotPrice',
      align: 'center',
      hide : false,
      color: '#fff'
    },
    {
      title: '买价',
      key: 'bp',
      align: 'center',
      hide : false,
      color: 'green',
    },
    {
      title: '卖价',
      key: 'sp',
      align: 'center',
      color: 'red',
      hide : false,
    },
    {
      title: '买价%',
      key: 'bpp',
      align: 'center',
      hide : true,
      color: 'green',
    },
    {
      title: '卖价%',
      key: 'spp',
      align: 'center',
      color: 'red',
      hide : true,
    },
    {
      title: '买价vol',
      key: 'bv',
      align: 'center',
      hide : true,
      color: 'green',
    },
    {
      title: '卖价vol',
      key: 'sv',
      align: 'center',
      color: 'red',
      hide : true,
    }
  ],
  data: [],
  index: 0
})
const getColumns = ()=>{
  return state.columns.filter(item => !Boolean(item.hide) )
}

const setShow = ()=>{
  state.index ++
  let indexStr =  state.index%3
  switch (indexStr){
    case 0 :{setStateColumn(['标的价格','标的','板块','品种','买价','卖价'])};break;
    case 1 :{setStateColumn(['标的价格','标的','板块','品种','买价vol','卖价vol'])};break;
    case 2 :{setStateColumn(['标的价格','标的','板块','品种','买价%','卖价%'])};break;
  }
}
const setStateColumn=(indexArr)=>{
  state.columns.forEach(item=> {
    item["hide"]= !indexArr.includes(item.title.trim())
  })
}


const refer = ()=>{
  getTAll(form.data.startDate).then( response=>{
    state.data.length = 0
    response.forEach(item=>{
      state.data.push({
        tmpId: item.tmpId,
        subject: item.pClass,
        iName: item.iName,
        instrument: item.iCode+","+item.aType+","+item.mType,
        spotPrice:Number(item.spotPrice).toFixed(2).toLocaleString(),
        bp:   Number(Number(item.buyNpv).toFixed(2)).toLocaleString(),
        sp:  Number(Math.abs(Number(item.shellNpv)).toFixed(2)).toLocaleString(),
        bpp:  Math.abs(new Number(Number(item.buyNpvPercent*100).toFixed(2)).toLocaleString())+'%',
        spp: Math.abs(new Number(Number(item.shellNpvPercent*100).toFixed(2))).toLocaleString()+'%',
        bv:  Number((100*Number(item.buyVol)).toFixed(2)).toLocaleString()+'%',
        sv:  Number((100*Number(item.shellVol)).toFixed(2)).toLocaleString()+'%'
      });
    })
  })
}

const openDetail = (event)=>{
  window.location.href = "/board/detail?instrumentId="+event.data.instrument+"&begDate="+form.data.startDate+"&iName="+event.data.iName+"&tmpId="+event.data.tmpId
}
//定义 timer 初始值及类型
let timer = null
onMounted(() => {
  refer()
  timer = setInterval(() => {
    refer()
  }, 5000)
})

onBeforeMount(() => {
  // 清理定时器要处理 timer 的类型
  clearInterval(Number(timer))
})
</script>
<style scoped>

/deep/ .p-column-header-content{
  justify-content: center;
}

#boardIndex {
  font-size: 14px !important;
  background: #111 !important;
  height: inherit;
}
.columnHeader{
  width: 16%;
  background: #333;
}
.elImg{
  content: url("../../assets/images/logo.0fc1f117.png");
  background-size: 100%;
  border: none;
  background-repeat: no-repeat;
  width: 170px; height: 48.97px;
}
</style>
